<template>
    <div class="tab-controller-box">
        <div class="tab-controller-head-box flex-center">
            <div>
                <i class="el-icon-collection-tag"></i>
                标签管理
            </div>
        </div>

        <div class="tab-controller-content-box flex-center-col">

            <div class="tab-controller-content">
                <div>
                    <span v-for="(item,index) in obj.tabs"
                        :class="'jump-'+(index%4+1)"
                         @click="toUpdateTab(item)"
                    >
<!--                             :style="{backgroundColor:getColorful(index)}"-->
                        <el-image :src="item.tImage" class="img">
                             <template #error>
                                <div style="width: 100%;height:100px;background-color: #F5F7FA;color: black"
                                     class="flex-center-col">
                                    <i class="el-icon-picture-outline"></i>
                                </div>
                             </template>
                        </el-image>

                            {{item.tName}} {{item.tPublish==0?'(隐藏)':''}}


                    </span>

                </div>

            </div>
        </div>

    </div>
</template>

<script>
    import {onMounted} from "@vue/runtime-core";
    import axios from 'axios'
    import {computed, reactive} from "@vue/reactivity";
    import {useRouter} from "vue-router";

    export default {
        name: "TabController",
        setup(){
            let router=useRouter()

            let obj=reactive({
                tabs:[]
            })


            function getAxiosTab(){

               return  axios.get("/api/tabs",{
                   headers:{
                       token:localStorage.getItem("token")
                   }
               }).then(resp=>resp.data)
            }
            async function setTab() {
                const data = await getAxiosTab()
                if(data.code===200){
                    obj.tabs=data.data
                }
                else{
                    alert(data.msg)
                }
            }


            let getColorful=computed(()=>(index)=>{
                let i=index
                if(index===128){
                    i=index
                }
                // let num=Math.floor(Math.random()*255)
                let blue=Math.floor(Math.random()*255)-i*2
                let green=Math.floor(Math.random()*255)-i*2
                let red=Math.floor(Math.random()*255)-i*2
                return 'rgb('+blue+','+green+','+red+')'
            })

            let toUpdateTab=(tab)=>{
                router.push({
                    name:"insertTab",
                    params:{
                        tab:JSON.stringify(tab)
                    }
                })
            }
            onMounted(()=>{
                setTab()
            })

            return{
                obj,
                getColorful,
                toUpdateTab
            }

        }
    }
</script>

<style scoped lang="less">

    .tab-controller-box{
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        box-shadow: 0 0 50px 0 grey;

        .tab-controller-head-box{
            width: 100%;
            height: 200px;
            font-size: 40px;


        }
        .tab-controller-content-box{
            width: 100%;
            height: 800px;

            .tab-controller-content{
                width: 90%;
                height: 90%;
                span{
                    display: inline-block;
                    width: 120px;
                    height:150px ;
                    font-size: 20px;
                    margin: 40px;
                    cursor: pointer;
                    position: relative;
                    border-radius: 5px;

                    .img{
                        width: 100px;
                        object-fit: cover;
                        border-radius: 2px;
                        box-shadow: 0 0 5px 0;
                    }
                }
                span:hover{
                   color:tomato;
                   animation-play-state: paused;
                }
            }
        }
    }

    .jump-1{
        animation: jump 3s ease-in-out 0.3s infinite alternate;
    }
    .jump-2{
        animation: jump 3s ease-in-out 0.5s infinite alternate;
    }
    .jump-3{
        animation: jump 3s ease-in-out 0.7s infinite alternate;
    }
    .jump-4{
        animation: jump 3s ease-in-out 0.9s infinite alternate;
    }

    @keyframes jump {
        from{
            top: 0;
        }
        50%{
            top: 30px;
        }
        to{
            top: 0;
        }
    }

</style>